import './Scss/Template.scss'
import 'swiper/css'
import 'swiper/css/navigation'
import 'swiper/css/pagination'
import { Fragment, useState } from 'react'
import { project } from '../../Common/Data'
import { Http } from '../../Common/Api'
import { Video } from '../../Common/Configure/Video'
import { parseURLParams } from '../../Common/Configure/Common'
import { CaretUpOutlined, CaretDownOutlined, CheckCircleOutlined } from '@ant-design/icons'
import { useRequest } from 'ahooks'
import { useEffect } from 'react'
import { Badge } from 'antd'
import { Autoplay, Navigation } from 'swiper'
import { Swiper, SwiperSlide } from 'swiper/react'
import { HomeTopDataOne, HomeTopDataTwo } from './Data'
import { FrontModalBox } from './Assets/Modal'
import { useLocation } from 'react-router-dom'

const { imageUrl } = project[window.location.hostname]

// 首页头部设置
export const HomeTop = ({ data, type }) => {
    const typeList = {
        1: HomeTopDataOne,
        2: HomeTopDataTwo,
    }
    const [OptionsCall, setOptionsCall] = useState()

    const ModalList = {
        1: { title: '权属企业详情', type: 'JTGJHomeTopOne' },
        2: { title: '项目详情', type: 'JTGJHomeTopTwo' },
        3: { title: '在册人员详情', type: 'JTGJHomeLeft' },
        5: { title: '工建简介', type: 'JTGJHomeLeft' },
    }

    return (
        <div className="HomeTop">
            <img src={imageUrl + 'indexL.png'} alt="" />
            <img src={imageUrl + 'IndexBox.png'} alt="" />
            <img src={imageUrl + 'indexR.png'} alt="" />
            <div>
                {typeList[type].map(({ uuid, img, label, value }) => (
                    <div
                        key={uuid}
                        onClick={() => {
                            if (uuid !== 4)
                                setOptionsCall({
                                    type: 'TableList',
                                    data: ModalList[uuid],
                                })
                            if (uuid === 5) {
                                setOptionsCall({
                                    type: 'APIAnnexModal',
                                    data: { title: '工建简介', uuid: '40491731-928e-4b02-aa30-f45f4a3a563e' },
                                })
                            }
                        }}
                    >
                        <img src={imageUrl + img} alt="" />
                        <div>
                            <div>{data ? data[value] : 0}</div>
                            <div>{label}</div>
                        </div>
                    </div>
                ))}
            </div>
            <FrontModalBox OptionsCall={OptionsCall} />
        </div>
    )
}

// 左右遮挡
export const HomeLeft = ({ children }) => {
    return (
        <div className="HomeLeft">
            <img src={imageUrl + 'IndexLeft.png'} alt="" />
            {children}
        </div>
    )
}

export const HomeRight = ({ children }) => {
    return (
        <div className="HomeRight">
            <img src={imageUrl + 'IndexRight.png'} alt="" />
            {children}
        </div>
    )
}

export const PageTopSelect = () => {
    return (
        <div className="PageTopSelect">
            G1111鹤哈高速鹤岗至苔青段工程建设项目ZP1合同段A3-2工区 <CaretDownOutlined />
        </div>
    )
}

// 组织机构列表
export const ProjectListTem = ({ ActiveEvent, count }) => {
    const { search } = useLocation()
    const [ProjectData, setProjectData] = useState([])
    const [OneNav, setOneNav] = useState([])

    const [Count, setCount] = useState({})

    const [Active, setActive] = useState('')

    const { runAsync } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            setProjectData(res)
            setActive(res[0].uuid)
        },
    })

    const { runAsync: getCount } = useRequest(Http, {
        manual: true,
        onSuccess: res => setCount(res),
    })

    useEffect(() => {
        let data = { isByUserUuid: 1 }
        if (search) {
            data.isByUserUuid = 0
            data.OrganizationUuid = parseURLParams(search).uuid
        }
        runAsync({ url: 'getOrgTree', data })
        if (count) getCount({ url: 'getAIPictureCount' })
    }, [runAsync, count, getCount, search])

    useEffect(() => {
        ActiveEvent?.emit(Active)
    }, [ActiveEvent, Active])

    const OneMenu = ({ data }) => {
        const { uuid, tableName, children } = data
        return (
            <>
                <div
                    className={`OneMenu${Active === uuid ? ' active' : ''}`}
                    onClick={() => {
                        setActive(uuid)
                        const navList = [...OneNav]
                        if (navList.includes(uuid)) setOneNav([...navList.filter(item => item !== uuid)])
                        else setOneNav([...navList, uuid])
                    }}
                >
                    <div> {tableName} </div>
                    {OneNav.includes(uuid) ? <CaretDownOutlined /> : <CaretUpOutlined />}
                </div>
                <div className={`TwoMenu ${OneNav.includes(uuid) ? 'Hidden' : ''}`}>
                    {children &&
                        children.length !== 0 &&
                        children.map((item, index) => <TwoMenu key={index} data={item} />)}
                </div>
            </>
        )
    }
    const TwoMenu = ({ data }) => {
        const { uuid, tableName } = data
        return (
            <div
                className={`TwoItem${Active === uuid ? ' active' : ''}`}
                onClick={() => {
                    setActive(uuid)
                }}
            >
                {tableName}
                {Count[uuid] && <span className="count">{Count[uuid]}</span>}
            </div>
        )
    }
    return (
        <div className="ProjectListTem">
            <div className="Title">组织机构</div>
            <div className="List">
                {ProjectData.length !== 0 &&
                    ProjectData.map(({ identityLevel, ...data }, index) => {
                        if (identityLevel === '2') return <OneMenu key={index} data={data} />
                        else return <TwoMenu key={index} data={data} />
                    })}
            </div>
        </div>
    )
}

// 饼图
export const PieTemplate = ({ size, data, color }) => {
    return {
        data,
        angleField: 'value',
        colorField: 'type',
        width: size,
        height: size,
        radius: 1,
        color,
        label: {
            type: 'inner',
            offset: '-30%',
            content: ({ percent }) => `${(percent * 100).toFixed(0)}%`,
            style: {
                fontSize: 14,
                textAlign: 'center',
            },
        },
        tooltip: false,
        legend: false,
        interactions: [{ type: 'element-active' }],
    }
}

// 环图
export const PieCharts = ({ size, data, color, statistic, title }) => {
    const number = data.reduce((accumulator, current) => accumulator + current.value, 0)
    return {
        width: size,
        height: size,
        data,
        angleField: 'value',
        colorField: 'type',
        color,
        radius: 1,
        innerRadius: 0.7,
        interactions: [{ type: 'element-default' }],
        label: false,
        tooltip: false,
        legend: false,
        statistic: {
            title: {
                offsetY: 5,
                style: statistic.title,
                content: number,
            },
            content: {
                offsetY: 10,
                style: statistic.content,
                content: title || '总人数',
            },
        },
        pieStyle: { lineWidth: 0 },
    }
}

// 半环图
export const ChartsDat = ({ size, percent }) => {
    const { width, height } = size
    return {
        autoFit: false,
        width,
        height,
        percent,
        radius: 0.9,
        startAngle: Math.PI,
        endAngle: 2 * Math.PI,
        range: { color: ['l(0) 0:#F28159 1:#ADEEBA', 'rgba(58, 168, 226, 0.2)'], width: 27 },
        indicator: null,
        statistic: {
            title: {
                offsetY: -25,
                style: { fontSize: '35px', color: '#fff', fontWeight: 'bold', fontFamily: 'Bahnschrift' },
                formatter: ({ percent }) => ` ${(percent * 100).toFixed(0)}%`,
            },
            content: {
                style: { fontSize: '16px', color: '#60EAFF', fontWeight: 'bold', fontFamily: 'PingFang' },
                formatter: () => '整改率',
            },
        },
        gaugeStyle: { lineCap: 'round' },
    }
}

// 单组柱状图
export const singularColumnTemplate = ({ size, data, color, autoRotate, yField, yTitle }) => {
    const { width, height } = size
    return {
        autoFit: false,
        width,
        height,
        maxColumnWidth: 14,
        appendPadding: 24,
        data,
        isGroup: true,
        xField: 'label',
        yField: yField || 'value',
        color,
        label: {
            position: 'top',
            style: { fill: '#FFFFFF', opacity: 1 },
        },
        legend: {
            layout: 'horizontal',
            position: 'top',
            offsetX: -24,
            itemName: { style: { fill: 'white', fontSize: 12 } },
        },
        xAxis: {
            label: { style: { fill: '#B2FBFD' }, autoRotate },
            line: { style: { stroke: '#B2FBFD' } },
            tickLine: { style: { stroke: '#B2FBFD' } },
        },
        yAxis: {
            title: {
                text: yTitle || '',
                position: 'end',
                autoRotate: false,
                offset: 50,
                style: { fill: '#B2FBFD' },
            },
            tickCount: 5,
            label: { style: { fill: '#B2FBFD' } },
            grid: { line: { style: { stroke: 'rgba(178, 251, 253, 0.2)', lineDash: [8, 2] } } },
        },
        scrollbar: {
            type: 'horizontal',
            categorySize: 60,
            style: {
                trackColor: 'rgba(178, 251, 253, 0.2)',
                thumbColor: 'rgba(178, 251, 253, 1)',
                thumbHighlightColor: '#367EF2',
            },
        },
    }
}

// 多组柱状图
export const complexColumnTemplate = ({ size, data, color, isGroup, yTitle, scrollbar }) => {
    const { width, height } = size
    return {
        autoFit: false,
        width,
        height,
        maxColumnWidth: 14,
        appendPadding: 24,
        data,
        isGroup,
        isStack: true,
        xField: 'label',
        yField: 'value',
        seriesField: 'type',
        color,
        label: {
            position: 'top',
            style: { fill: '#FFFFFF', opacity: 1 },
        },
        tooltip: { formatter: e => ({ name: e.type, value: e.value }) },
        legend: {
            layout: 'horizontal',
            position: 'top-right',
            offsetY: 24,
            itemName: { style: { fill: 'white', fontSize: 12 } },
        },
        xAxis: {
            label: { style: { fill: '#B2FBFD' } },
            line: { style: { stroke: '#B2FBFD' } },
            tickLine: { style: { stroke: '#B2FBFD' } },
        },
        yAxis: {
            title: {
                text: yTitle || '',
                position: 'end',
                autoRotate: false,
                offset: 50,
                style: { fill: '#B2FBFD' },
            },
            tickCount: 5,
            label: { style: { fill: '#B2FBFD' } },
            grid: { line: { style: { stroke: 'rgba(178, 251, 253, 0.2)', lineDash: [8, 2] } } },
        },
        scrollbar: {
            type: 'horizontal',
            categorySize: scrollbar || 120,
            style: {
                trackColor: 'rgba(178, 251, 253, 0.2)',
                thumbColor: 'rgba(178, 251, 253, 1)',
                thumbHighlightColor: '#367EF2',
            },
        },
    }
}

// 条形图
export const BarTemplate = ({ size, data, color, yTitle, xField }) => {
    const { width, height } = size
    return {
        autoFit: false,
        width,
        height,
        maxColumnWidth: 14,
        appendPadding: 24,
        data,
        isStack: true,
        xField: xField || 'value',
        yField: 'type',
        color: color,
        legend: {
            layout: 'horizontal',
            position: 'top-right',
            offsetY: 24,
            itemName: { style: { fill: '#B2FBFD', fontSize: 12 } },
        },
        xAxis: {
            label: { style: { fill: '#B2FBFD' } },
            line: { style: { stroke: '#B2FBFD' } },
            tickLine: { style: { stroke: '#B2FBFD' } },
        },
        yAxis: {
            title: {
                text: yTitle || '',
                position: 'start',
                autoRotate: false,
                offset: 50,
                style: { fill: '#B2FBFD' },
            },
            label: { style: { fill: '#B2FBFD' } },
            grid: { line: { style: { stroke: 'rgba(178, 251, 253, 0.2)', lineDash: [8, 2] } } },
        },
    }
}

// 通用after参数
export const AfterList = ({ list, data, style, click }) => {
    return (
        <div className="AfterList" style={style}>
            {list.map(({ uuid, label, value, color, unit }) => (
                <div key={uuid} onClick={() => click(uuid, label)}>
                    <div style={{ color: color ? color : 'white' }}>{label}</div>
                    <div>
                        {data ? data[value] : value ? value : 0}
                        {unit}
                    </div>
                </div>
            ))}
        </div>
    )
}

// 通用list 列表
export const TextListTemplate = ({ top, data }) => {
    return (
        <div className="TextListTemplate">
            <div className="top">
                {top.map(({ uuid, label, flex }) => (
                    <div key={uuid} style={{ flex }}>
                        {label}
                    </div>
                ))}
            </div>
            <div className="list">
                {data.map(({ uuid, ...item }) => (
                    <div key={uuid}>
                        {top.map(({ uuid, value, type, flex, Enum }) => {
                            switch (type) {
                                case 'select':
                                    const { label, status } = Enum[item[value]]
                                    return (
                                        <div className="select" key={uuid} style={{ flex }}>
                                            <Badge status={status} style={{ marginRight: 8 }} />
                                            <div>{label}</div>
                                        </div>
                                    )
                                default:
                                    return (
                                        <div key={uuid} style={{ flex }}>
                                            {item[value] || 0}
                                        </div>
                                    )
                            }
                        })}
                    </div>
                ))}
            </div>
        </div>
    )
}

// swiper
export const SwiperBoxOne = ({ data }) => {
    return (
        <>
            <Swiper
                className="SwiperBoxOne"
                modules={[Autoplay, Navigation]}
                navigation
                autoplay
                loop
                slidesPerView={3}
                spaceBetween={16}
                centeredSlides
            >
                {data.length !== 0 &&
                    data.map(({ uuid, label, value }) => (
                        <SwiperSlide className="SwiperItem" key={uuid}>
                            <img src={value} alt="" />
                            {label && <div className="SwiperName">{label}</div>}
                        </SwiperSlide>
                    ))}
            </Swiper>
        </>
    )
}

export const FouVideo = () => {
    const [Camera, setCamera] = useState()

    const { runAsync } = useRequest(Http, { manual: true, onSuccess: res => setCamera(res.list) })

    useEffect(() => {
        runAsync({ url: 'getCamera', data: { pageIndex: 1, pageSize: 2 } })
    }, [runAsync])

    return (
        <div className="FouVideo">
            {Camera &&
                Camera.map(({ uuid, ...item }) => (
                    <div key={uuid}>
                        <Video data={item} />
                    </div>
                ))}
        </div>
    )
}

export const FouTwoBox = ({ list, data }) => {
    return (
        <div className="FouTwoBox">
            {list.map(({ uuid, title, children }) => (
                <div key={uuid}>
                    <div className="Title">{title}</div>
                    <div className="children">
                        {children.map(({ uuid, title, value, unit, state }) => (
                            <div key={uuid}>
                                <div>
                                    <div>{title} : </div>
                                    <div>{data[value]}</div>
                                    {unit && <div>{unit}</div>}
                                </div>
                                {state && (
                                    <CheckCircleOutlined style={{ fontSize: 16, color: 'rgba(92, 249, 210, 1)' }} />
                                )}
                            </div>
                        ))}
                    </div>
                </div>
            ))}
        </div>
    )
}

export const FouThrFou = ({ list, data }) => {
    return (
        <div className="FouThrFou">
            {list.map(({ uuid, img, label, value, unit }) => (
                <div key={uuid}>
                    <img src={imageUrl + img} alt="" />
                    <div>
                        <div>{label}</div>
                        <div>
                            {data[value]} <span>{unit}</span>{' '}
                        </div>
                    </div>
                </div>
            ))}
        </div>
    )
}
